<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <link rel="stylesheet" href="./css/login.css">
  <link rel="stylesheet" href="./css/base.css">
  <script src="./js/base.js"></script>
</head>
<body>
  <div id="login" class="wrap">
    <div class="container">
      <div class="login-title">账号登录</div>
      <div class="form-item">
        <div class="form-label">
          <div class="icon-box">
            <img class="user-icon" src="./images/user_icon.png" />
          </div>
          账号: 
        </div>
        <input type="text" v-model="username" class="inp" placeholder="请输入账号" />
      </div>
      <div class="form-item">
        <div class="form-label">
          <div class="icon-box">
            <img class="lock-icon" src="./images/lock_icon.png" />
          </div>
          密码: 
        </div>
        <input type="password" v-model="password" class="inp" placeholder="请输入密码" />
      </div>
      <div class="sub-btn" @click="onSubmit">
        登录
      </div>
    </div>
  </div>
</body>
<script src="./js/vue.js"></script>
<script>
  var login = new Vue({
    el: '#login',
    data() {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      onSubmit() {
        const list = getSession('userList') || [];
        const obj = list.find(item => item.username == this.username);
        if (!obj || obj.password != this.password) alert('用户名或密码错误');
        if (obj && obj.password == this.password) {
          alert('登录成功');
          setSession('userInfo',obj);
          window.location.href = 'user.html';
        } 
      }
    }
  })
</script>
</html>